<template lang="pug">
div
  Login(v-if="!$root.User.IsLoggedIn")

  div(v-else)
    g-h.tab-bar(j-c="space-around")
      div.tab-bar-item(
          :class="{'tab-is-active': active === 'MainPage'}"
          @click="selectTab('MainPage')"
          )
        icon-home.icon(:strokeWidth="3")
        div 菜单
      div.tab-bar-item(
          :class="{'tab-is-active': active === 'MyPage'}"
          @click="selectTab('MyPage')"
          )
        icon-my.icon(:strokeWidth="2")
        div 个人中心
    mt-tab-container(v-model="active")
      mt-tab-container-item(id="MainPage")
        MainPage
      mt-tab-container-item(id="MyPage")
        MyPage(@logout="active = 'MyPage'")

</template>

<script>
import api from "$api"
import util from "$util"

import Login from "../app/login/a.vue"
import MainPage from "./MainPage.vue"
import MyPage from "./MyPage.vue"

export default {
  components: {
    Login,
    MainPage,
    MyPage,
  },
  data() {
    return {
      active: "MainPage",
    }
  },

  watch: {
    "$root.User.IsLoggedIn"(v) {
      if (v) {
        this.active = "MainPage"
      }
    },
  },

  methods: {
    selectTab(tag) {
      if (this.active === tag) {
        return
      }
      this.active = tag
    },

    registerScanner() {
      util.registerScanner((data) => {
        let elem = document.activeElement
        if (elem.tagName === "INPUT") {
          elem.value = data
        }
      })
    },
  },

  activated() {
    this.registerScanner()
  },
}
</script>

<style lang="stylus" scoped>

.tab-bar
  z-index: 2
  position: fixed
  bottom: 0
  left: 0
  right: 0
  border-top: 1px solid grey400
  background: grey200
  white-space: nowrap
  overflow-no-scrollbar()

  &-item
    width: 25%
    padding: 0.3rem 0
    font-size: 12px
    color: grey800

    display: flex
    flex-flow: column
    justify-content: center
    align-items: center

.tab-is-active
  color: blue600

.icon
  margin-bottom: 0.2rem

</style>
